var ul = document.querySelector('nav>ul')
// console.log(ul)
//获取nav的ajax数据
var xhr = new XMLHttpRequest()
xhr.open('get', 'http://chst.vip:1234/api/getbaicaijiatitle')
xhr.send()
xhr.onreadystatechange = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
        // console.log(xhr.responseText)
        var x = JSON.parse(xhr.responseText).result
        // console.log(x)
        var html = ""
        x.forEach(item => {
            html += `<li>${item.title}</li>`
        });
        // console.log(html)
        ul.innerHTML = html

        //给nav的ul的li设置点击事件
        var navli = $('nav>ul>li')
        // console.log(navli)
        navli.click(function () {
            var suoyin = $(this).index()
            // console.log(suoyin)
            fn(suoyin)
        })
    }
}
//获取section的ajax数据
var id = 0
function fn(id) {
    var ul2 = document.querySelector('section>ul')
    // console.log(ul2)
    var xhr2 = new XMLHttpRequest()
    xhr2.open('get', 'http://chst.vip:1234/api/getbaicaijiaproduct?titleid=' + id)//进入自动刷新一次为id为0
    xhr2.send()
    xhr2.onreadystatechange = function () {
        if (xhr2.readyState === 4 && xhr2.status === 200) {
            var x2 = JSON.parse(xhr2.responseText).result
            console.log(x2)
            var html2 = ""
            x2.forEach((item) => {
                html2 += ` <li>
                 ${item.productImg}
             <h4>${item.productName}</h4>
             <span>${item.productPrice} <del>1888.0</del></span>
            
             ${item.productCouponRemain}<!-- 精度条 -->
              
              <button>${item.productCoupon}</button>
              <input type="button" value="下单链接">
             </li>`
            })
            //  console.log(html2)
            ul2.innerHTML = html2

            var quan = $('section>ul>li>button')
            var lianjie = $('section>ul>li>input')
            //因为quan在申请ajax数据之后自动获取了一个a标签，网址已经不可访问了，但我们要a里面的文本，故有以下步骤
            quan.text(quan.children().eq(1).text())
            // console.log(quan.children())
            //15元券和下单链接都是刷新当前页面
            //给li设置刷新页面事件
            var lis = $('section>ul>li')
            lis.click(function () {
                location.reload()
            })
            //给quan设置刷新页面事件
            quan.click(function () {
                location.reload()
            })
            //给lianjie设置刷新页面事件
            lianjie.click(function () {
                location.reload()
            })

            //    var b=document.querySelectorAll('section>ul>li>div>b')
            //    console.log(b)
            //    b.forEach((itemb)=>{
            //        console.log({...itemb.innerText})
            //      var shuju={...itemb.innerText}
            //     console.log(shuju.substring(0,3))
            //    })
            var jindutiao = document.querySelectorAll('section>ul>li>div>i>em')
            var span = document.querySelectorAll('section>ul>li>div>i>span')
            var bshu = document.querySelectorAll('section>ul>li>div>b')
            var reg = /\d{1,}/

            bshu.forEach((itemb) => {
                var t = itemb.innerText
                // console.log(reg.exec(t));
                var zhi = (reg.exec(t))[0]
                var dingzhi = 2000/zhi
                  console.log(zhi)   
                var timer = setInterval(() => {
                    zhi--
                    console.log(zhi)
                    itemb.innerText = `还剩${zhi}张`
                    if (zhi === 0) {
                        clearInterval(timer)
                    }

                }, dingzhi)
            })

            jindutiao.forEach((item) => {
                var x = 0
                var time = setInterval(() => {
                    item.setAttribute('style', 'width:' + x + '%')
                    x += 1
                    span.forEach((items) => {
                        items.innerText = x + '%'
                        if (x > 20) {
                            items.style.left = x / 3 + '%'
                        }
                    })
                    if (x === 100) {
                        clearInterval(time)
                    }
                }, 20)

            })
        }
    }
}
fn(id)
//书写返回index.html功能
var fanhui = document.querySelector('header>a')
fanhui.onclick = function () {
    location.href = "../index.html"
}



